<template>
    <el-table :border='false' class='w-100' row-key='id' :data='categoryData'>
        <el-table-column prop='name' label='名称' />
        <el-table-column prop='code' label='编码' />
        <el-table-column align='center' label='操作'>
            <template #default='{row}'>
                <XRequestButton isConfirm confirmText='确定删除该分类吗' :click='async () => deleteRow(row.id)'>
                    <el-button size='mini' type='text'>删除</el-button>
                </XRequestButton>
                <el-button class='m-l-5' size='mini' type='text' @click='openAdd(row)'>编辑</el-button>
                <el-button class='m-l-5' size='mini' type='text' @click='openAddChild(row)'>新增子分类</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class='m-t-10'>
        <el-button type='primary' size='mini' @click='() => openAdd()'>新 增</el-button>
    </div>

    <XClickDialog ref='dialogRef' title='新增' width='400px' @close='close' :confirm='confirm'>
        <template #content>
            <el-form ref='formRef' size='mini' label-width='60px' :rules='rules' :model='formData'>
                <el-form-item label='名称' prop='name'>
                    <el-input type='text' clearable show-word-limit :maxlength='rules.name[1].max' v-model='formData.name' />
                </el-form-item>
                <el-form-item label='编码' prop='code'>
                    <el-input type='text' clearable show-word-limit :maxlength='rules.code[1].max' v-model='formData.code' />
                </el-form-item>
            </el-form>
        </template>
    </XClickDialog>

</template>

<script lang='ts' setup>
    import { addItemApi, editItemApi, itemListApi, deleteItemApi } from '@/api/dictionary'
    import { ElMessage } from 'element-plus';
    import { reactive, ref, toRefs, watch } from 'vue';
import { recursion } from '../../../utils';

    const props = defineProps<{
        categoryId:number
    }>()

    const emit = defineEmits<{
        (e : 'delete', id : number)
    }>()

    const { categoryId } = toRefs(props)

    const dialogRef = ref()
    const formRef = ref()

    const categoryData = reactive([])

    const formData = reactive({
        name : '',
        code : '',
        id : 0,
        parentId : 0,
    })

    const rules = reactive({
        name : [
            {
                required : true,
                message : '请输入名称'
            },
            {
                max : 15,
                message: '名称不能超过10个字符',
            }
        ],

        code : [
            {
                required : true,
                message : '请输入编码'
            },
            {
                max : 20,
                message: '编码不能超过20个字符',
            }
        ],
    })

    function getAllItem() {
        categoryData.splice(0)
        itemListApi(categoryId.value).then(rows => {
            if(rows) {
                const arr = recursion(rows)
                categoryData.push(...arr)
            }
        })
    }

    function openAdd(data=null) {
        if(data) {
            formData.code = data.code
            formData.name = data.name
            formData.id = data.id
        }
        dialogRef.value.open()
    }

    function openAddChild(data) {
        formData.parentId = data.id
        dialogRef.value.open()
    }

    async function confirm() {
        try {
            await formRef.value.validate()
            if(formData.id == 0) { //增加的
                const res = await addItemApi({categoryId : props.categoryId, ...formData})
                if(res.success) {
                    getAllItem()
                    dialogRef.value.close()
                    ElMessage.success!('增加成功')
                }else {
                    ElMessage.error!(res.msg)
                }
            }else {
                const res = await editItemApi(formData.id, formData)
                if(res.success) {
                    getAllItem()
                    dialogRef.value.close()
                    ElMessage.success!('编辑成功')
                }else {
                    ElMessage.error!(res.msg)
                }
            }
        } catch (error) {
            
        }
    }

    async function deleteRow(id) {
        const rs = await deleteItemApi(id)
        if(rs.success) {
            getAllItem()
            ElMessage.success!('删除成功')
            emit('delete', id)
        }else {
            ElMessage.error!(rs.msg)
        }
    }

    

    function close() {
        formData.name = ''
        formData.code = ''
        formData.id = 0
    }

    watch(categoryId, (newV, oldV) => {
        getAllItem()
    })

    if(categoryId.value > 0) {
        getAllItem()
    }
    
    

</script>